<template>
  <div class="home-page">
    <mt-header fixed title="首页">
    </mt-header>
    <div class="my-tab">
      <div class="my-thumbnail">
        <div class="my-bg">
          <span class="my-weichat-name">微信号：阆中牛肉</span>
        </div>
        <div class="my-info">
          <div class="my-info-item"></div>
          <div class="my-info-item" @click="myPerformance">我的业绩</div>
          <span class="segmentation">|</span>
          <div class="my-info-item" @click="myPerformance">我的团队</div>
        </div>
        <div class="my-header">
        </div>
      </div>
      <div class="items-container">
        <div class="my-item" @click="goShoppingTro">
          <span class="fa fa-shopping-cart icon-item"></span> 我的购物车 <span class="right-icon fa fa-angle-double-right"></span>
        </div>
        <div class="my-item" @click="goOrderList">
          <span class="fa fa-list-ul icon-item" style="font-size: 1rem"></span> 我的订单 <span class="right-icon fa fa-angle-double-right"></span>
        </div>
        <div class="my-item" @click="goAddress">
          <span class="fa fa-map-marker icon-item"></span> 我的地址 <span class="right-icon fa fa-angle-double-right"></span>
        </div>
      </div>
      <div class="my-code">
        <span class="code-title">我的二维码</span>
        <img class="my-code-img-wrapper" src="../assets/images/empty-order.png" alt="">
      </div>
    </div>
    <div class="products-out-wrapper" v-if="selected === 'products'">
      <my-tabbar :selected="tab" @change="handle">
        <my-tabbar-item text="新零售" name="new">
          <mt-badge size="large" class="badge-fixed" slot="tabbar-badge">30</mt-badge>
        </my-tabbar-item>
        <span class="split">|</span>
        <my-tabbar-item text="全部商品" name="all">
          <!--<mt-badge size="large" class="badge-fixed" slot="tabbar-badge">10</mt-badge>-->
        </my-tabbar-item>
        <span class="split">|</span>
        <my-tabbar-item text="我的" name="my">
          <mt-badge size="large" class="badge-fixed" slot="tabbar-badge">20</mt-badge>
        </my-tabbar-item>
      </my-tabbar>
      <div class="products-container" v-if="tab === 'new'">
        <my-product link-url="product-detail.html" v-for="(item,key) in 10" :key="key"></my-product>
      </div>
      <div class="products-container" v-if="tab === 'all'">
        <my-product link-url="product-detail.html" v-for="(item,key) in 2" :key="key"></my-product>
      </div>
      <div class="products-container" v-if="tab === 'my'">
        <my-product link-url="product-detail.html" v-for="(item,key) in 3" :key="key"></my-product>
      </div>
    </div>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <i class="fa-home fa icon-tabbar"></i>
        我的信息
      </mt-tab-item>
      <mt-tab-item id="products">
        <i class="fa-shopping-cart fa"></i>
        全部商品
      </mt-tab-item>
      <mt-tab-item id="performance">
        <i class="fa-bar-chart fa icon-tabbar"></i>
        绩效
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import MyTabbar from '@/components/Tabbar/index'
  import MyTabbarItem from '@/components/Tabbar/TabbarItem'
  import MySelf from '@/page/MySelf.vue'
  import MyProduct from '@/components/Product/index'
  export default {
    components: {
      MySelf,
      MyTabbar,
      MyProduct,
      MyTabbarItem
    },
    name: 'HomePage',
    data: () => ({
      tab: 'new',
      selected: 'home'
    }),
    watch: {
      selected: function (newValue,oldValue) {
        console.log(newValue)
      }
    },
    methods: {
      handle (data) {
        this.tab = data;
      },
      goBack () {
        window.location.href = 'www.baidu.com'
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/variable";
  @import "../assets/css/px2rem";
  .home-page{
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    width:100%;
    height: 100%;
  }
  .paddingTop{
    padding-top: px2rem($header-height);
  }

  .split{
    font-size: 0.6rem;
    display: inline-block;
    height: px2rem($tabbar-height);
    line-height: px2rem($tabbar-height);
    color: #d5d5d5;
  }


  .products-container{
    background: #f5f5f5;
    width:100%;
    float: left;
    height:auto;
    display: block;
    overflow-y: auto;
  }


  .my-thumbnail{
    float: left;
    width:100%;
    position: relative;
    height: px2rem(600px);
    .my-bg{
      float: left;
      width: 100%;
      height: px2rem(400px);
      background: linear-gradient(#ffa63b, $theme-color-deep);
      position: relative;
      .my-weichat-name{
        position: absolute;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.8rem;
        color: white;
        bottom: px2rem(20px);
        left:px2rem(400px);
      }
    }
    .my-info{
      width:100%;
      height: px2rem(200px);
      box-sizing: border-box;
      background: white;
      border-top: 1px solid $borderColor;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      .my-info-item{
        flex: 1;
        font-size: 0.7rem;
        color: $fontColor;
      }
    }

    .my-header{
      width:px2rem(250px);
      height:px2rem(250px);
      border-radius: 50%;
      position: absolute;
      box-sizing: border-box;
      border: 1px solid $borderColor;
      box-shadow:  0 0 5px rgba(0,0,0,0.3);
      bottom: px2rem(100px);
      left:px2rem(100px);
      background-size: cover;
      background-image: url("../assets/images/defalut-header.jpg");
    }
    .segmentation{
      color: #e5e5e5;
      font-size: 0.85rem;
    }
  }

  .items-container{
    margin-top: px2rem(70px);
    float: left;
    width:100%;
    clear: both;
    background: white;
    .my-item{
      height: px2rem(150px);
      line-height: px2rem(150px);
      font-size: 0.8rem;
      box-sizing: border-box;
      padding-left: px2rem(180px);
      position: relative;
      width:100%;
      float: left;
      border-top: 1px solid $borderColor;
      background: white;
      display: block;
      color: $fontColor;
    }

    .icon-item{
      position: absolute;
      left:0;
      top:0;
      color: $theme-color;
      width:px2rem(150px);
      font-size: 1.2rem;
      line-height: px2rem(150px);
      text-align: center;
      height: px2rem(150px);
    }

    .right-icon{
      float: right;
      width:px2rem(150px);
      height: px2rem(150px);
      line-height:px2rem(150px);
      text-align: center;
      font-size: 1.2rem;
      color:#d5d5d5;
    }
  }

  .my-code{
    width:100%;
    float: left;
    height: auto;
    margin-top: px2rem(70px);
    border-top: 1px solid $borderColor;
    background: white;
  }

  .code-title{
    font-size: 0.8rem;
    color: $fontColor;
    text-indent: 1em;
    display: block;
    width: 100%;
    line-height: px2rem(200px);
  }

  .my-code-img-wrapper{
    margin: 10%;
    width: 80%;
    box-shadow: 0 0 px2rem(20px) rgba(0,0,0, 0.3);
  }

</style>
